<template>
	<div class="createSong">
		<div class="createSongBox">
			<div class="SongTitle">
				<img @click="SongButton" src="../../../assets/images/下划.png" :class="{'donghua1': !isShow}" />
				<p>创建的歌单<span>({{arr2.length}})</span></p>
				<div type="primary" @click="showPopup2">
					<img class="img3" src="../../../assets/images/加号(2).png" />
				</div>
				<van-popup v-model="show2">
					<div class="addbox">
						<span>新建歌单</span>
						<input type="text" maxlength="40"   v-model="addtext" placeholder="请输入歌单标题" name="" id="" value="" />
						<div class="inputfontnum">
							<p>{{addtext.length}}/40</p>
						</div>
						<div class="addboxButtonBox">
							<div class="addboxButton">
								<div class="addCancel" @click="addCancel">
									取消
								</div>
								<div class="addSubmit" @click="addSubmit2">
									提交
								</div>
							</div>
						</div>
					</div>
				</van-popup>	
				<div type="primary" @click="showPopup1">
					<img class="imgBox" src="../../../assets/images/更多 (2).png" />
				</div>

				<van-popup v-model="show1" position="bottom">
					<ul class="songList">
						<li><span>歌单:</span> </li>
						<li><img src="../../../assets/images/创建.png" /><span>创建新歌单</span></li>
						<li><img src="../../../assets/images/歌单.png" /><span>歌单管理</span></li>
						<li><img src="../../../assets/images/截图.png" /><span>截图导入歌单</span></li>
						<li><img src="../../../assets/images/恢复.png" /><span>恢复歌单</span></li>
					</ul>
				</van-popup>
			</div>
			<div class="LoveSongBox" v-show="isShow">
				<div class="LoveSong" @click="SongDetails" v-for="item in arr3" :key="item.id">
					<div class="LoveSongLeft">
						<img :src="item.coverImgUrl" />
						<div class="LoveSongTitleBox">
							<p>我喜欢的音乐</p>
							<div>
								<img src="../../../assets/images/打钩.png" />
								<p>{{item.trackCount}}首</p>
							</div>
						</div>
					</div>
					<!--<div class="Heartbeat">
						<img src="../../../assets/images/心 爱心.png" />
						<span>心动模式</span>
					</div>-->
				</div>
				<div class="LoveSong" v-for="(item,idx) in arr4" :key="item.id">
					<div class="LoveSongLeft" @click="SongDetails(idx)">
						<img :src="item.coverImgUrl" />
						<div class="LoveSongTitleBox">
							<p>{{item.name}}</p>
							<div>
								<img src="../../../assets/images/打钩.png" />
								<p>{{item.trackCount}}首</p>
							</div>
						</div>
					</div>
					<div type="primary" @click="showPopup(idx)">
						<img class="imgBox" src="../../../assets/images/更多.png" />
					</div>

					<van-popup class="songListBox" v-model="show" position="bottom">
						<ul class="songList">
							<li><span>歌单:</span> </li>
							<li><img src="../../../assets/images/下载.png" /><span>下载</span></li>
							<li><img src="../../../assets/images/分 享.png" /><span>分享</span></li>
							<li :data-idx="idx" @click="createedit">
								<!--<van-div type="primary" @click="showPopup_02">-->
								<img src="../../../assets/images/编辑.png" /><span>编辑歌单信息</span>
								<!--</van-div>
								<van-popup v-model="show_02" position="bottom" >
									123
								</van-popup>-->
								<!--<edit-song></edit-song>-->
							</li>
							<li><img src="../../../assets/images/删 除.png" /><span>删除</span></li>
						</ul>
					</van-popup>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	//	import editSong from './editSong.vue';
	export default {
		name: "createSong",
		data() {
			return {
				isShow: true,
				show: false,
				show1: false,
				show_02: false,
				show2: false,
				arr2: sessionStorage.getItem("cSsearr2") ? JSON.parse(sessionStorage.getItem("cSsearr2")) : [],
				arr3: sessionStorage.getItem("cSsearr2_3") ? JSON.parse(sessionStorage.getItem("cSsearr2_3")) : [],
				arr4: sessionStorage.getItem("cSsearr2_4") ? JSON.parse(sessionStorage.getItem("cSsearr2_4")) : [],
				idx: "",
				addtext:""
			}
		},
		created() {
			let that = this
			this.$parent.$on("tosibling", function(data) {
				that.arr2 = data
				sessionStorage.setItem('cSsearr2', JSON.stringify(that.arr2));
				console.log(that.arr2)
				that.arr3.push(that.arr2[0])
				for(let i = 1; i < that.arr2.length; i++) {
					that.arr4.push(that.arr2[i])
				}
				console.log(that.arr3)
				sessionStorage.setItem('cSsearr2_3', JSON.stringify(that.arr3));
				console.log(that.arr4)
				sessionStorage.setItem('cSsearr2_4', JSON.stringify(that.arr4));
			})
		},
		methods: {
			SongButton() {
				this.isShow = !this.isShow
			},
			showPopup(idx) {
				this.idx = idx;
				this.show = true;
				//				console.log(this.idx)
			},
			showPopup_02() {
				this.show = false;
				this.show_02 = true
			},
			showPopup1() {
				this.show1 = true;
			},
			createedit() {
				this.$router.push({
					name: 'createedit',
					params: {
						arr: this.arr4[this.idx]
					}
				})
			},
			showPopup2() {
				this.show2 = true;
			},
			addCancel(){
				this.show2 = false;
			},
			addSubmit2(){
//				console.log(11)
				this.$http.get("/playlist/create", {
					params: {
						name : this.addtext
					}
				}).then(res=>{
					console.log(res)
				}).catch(() => {
					console.log("创建失败")
				})
			},
			SongDetails(idx){
//				this.$store.commit("songdetails")
//				console.log(this.arr4)
//				console.log(this.arr4[idx].id)
				this.$router.push({
					name: 'musiclistdetail',
					query: {
						idx: this.arr4[idx].id
					}
				})
			}
		},
		components: {
		},
		computed: {
		},
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.van-popup--bottom {
		border-top-left-radius: vw(20);
		border-top-right-radius: vw(20);
		background: #fff;
		.songList {
			li {
				padding: vw(20) vw(17);
				border-bottom: 1px solid #f7f7f7;
				display: flex;
				align-items: center;
				font-size: 0;
				img {
					width: vw(25);
					height: vw(25);
				}
				span {
					margin-left: vw(10);
					font-size: vw(16);
				}
			}
			li:not(:first-child) {
				padding: vw(15) vw(17);
			}
		}
	}
	.van-popup--center{
		width: vw(326);
		height: vw(218);
		border-radius: vw(20);
		padding: vw(24) vw(22);
		/*box-sizing: border-box;*/
		.addbox{
			display: flex;
			flex-direction: column;
			span{
				font-size: vw(20);
				line-height: vw(20);
				color: #212121;
			}
			input{
				border: none;
				font-size: vw(18);
				line-height: vw(18);
				margin-top: vw(30);
			}
			.inputfontnum{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-top: vw(10);
				p{
					font-size: vw(12);
					color: #d9d9d9;
				}
			}
			.addboxButtonBox{
				margin-top: vw(50);
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.addboxButton{
					display: flex;
					font-size: vw(15);
					color: #ff5059;
					.addCancel{
						margin-right: vw(40);
					}
				}
			}
		}
	}
	.createSong {
		width: 100%;
		display: flex;
		justify-content: center;
		.createSongBox {
			width: 92%;
			.SongTitle {
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: vw(15) 0;
				align-items: center;
				img {
					width: vw(16);
					height: vw(16);
				}
				img:first-child {
					transition: 0.5s all;
				}
				>p {
					display: flex;
					align-items: center;
					font-size: vw(16);
					font-weight: bold;
					height: vw(16);
					line-height: vw(16);
					padding: vw(0) vw(130) 0 0;
					span {
						margin-left: vw(6);
						font-size: vw(12);
						color: #a3a3a3;
					}
				}
				.img3 {
					margin-right: vw(10);
				}
			}
			.LoveSong {
				padding: vw(10) 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.LoveSongLeft {
					width: 100%;
					display: flex;
					align-items: center;
					overflow: hidden;
					>img {
						width: vw(60);
						height: vw(60);
						border-radius: vw(6);
						background: black;
					}
					.LoveSongTitleBox {
						display: flex;
						flex-direction: column;
						margin-left: vw(10);
						>p {
							font-size: vw(16);
						}
						div {
							font-size: 0;
							margin-top: vw(5);
							img {
								vertical-align: top;
								width: vw(18);
								height: vw(18);
								margin-right: vw(10);
							}
							p {
								display: inline-block;
								font-size: vw(12);
								color: #898989;
								span {
									font-size: vw(12);
									color: #898989;
									margin-left: vw(4);
								}
							}
						}
					}
				}
				.imgBox {
					width: vw(20);
					height: vw(20);
				}
				.Heartbeat {
					width: vw(87);
					height: vw(27);
					border-radius: vw(10);
					display: flex;
					border: 1px solid #eeeeee;
					justify-content: center;
					align-items: center;
					font-size: 0;
					img {
						width: vw(13);
						height: vw(13);
						margin-right: vw(2);
					}
					span {
						font-size: vw(12);
					}
				}
			}
			.LoveSong:not(:nth-child(1)) {
				.LoveSongLeft {
					width: 95%;
				}
			}
		}
	}
	
	.donghua1 {
		transform: rotate(-90deg);
		transition: 0.5s all;
	}
</style>